<% layout('/layouts/default.html', {title: '', bodyClass: ''}){ %>
<!-- <link rel="stylesheet" href="${ctxStatic}/modules/sys/sysDesktop.css?${_version}"> -->
<div class="content pb0">
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-aqua"><i class="fa fa-puzzle-piece"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Blockly for Raspberry 项目数量</span>
                    <span class="info-box-number">11 <small>个</small></span>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-red"><i class="fa fa-cloud-download"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">已下载的扩展模块</span>
                    <span class="info-box-number">21 <small>个</small></span>
                </div>
            </div>
        </div>
        <div class="clearfix visible-sm-block"></div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-green"><i class="fa fa-share"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">收到的共享项目</span>
                    <span class="info-box-number">13 <small>个</small></span>
                </div>
            </div>
        </div>
<!--        <div class="col-md-3 col-sm-6 col-xs-12">-->
<!--            <div class="info-box">-->
<!--                <span class="info-box-icon bg-yellow"><i class="fa fa-users"></i></span>-->

<!--                <div class="info-box-content">-->
<!--                    <span class="info-box-text">新用户</span>-->
<!--                    <span class="info-box-number">2,000</span>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
    </div>
    <div class="row">
        <section class="col-md-12">
            <div class="box box-widget">
                <div class="box-header with-border">
                    <i class="fa fa-video-camera"></i>
                    <h3 class="box-title">Blockly for Raspberry操作视频</h3>
                    <div class="box-tools pull-right">
                    </div>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3">
                            <video id="my-player" class="video-js" controls preload="auto" poster="${ctxStatic}/images/blockly_for_raspberry_preview.png" data-setup='{}' style="width:100%;height:450px;">
                                <source src="${ctxStatic}/video/blockly_for_raspberry_preview.mp4" type="video/mp4"></source>
                                <!--source src="rtmp://49.232.149.187:1935/oflaDemo/BlocklyForRaspberryPreview.mp4" type="video/mp4"></source-->
                            </video>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="col-md-7">
            <!-- TO DO List -->
            <div class="box box-widget">
                <div class="box-header with-border">
                    <i class="fa fa-code"></i>
                    <h3 class="box-title">树莓派上安装和更新的模块</h3>
                    <div class="box-tools pull-right">
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="row">
                        <div class="col-sm-12 codeContainer">
                            <pre><code class="bash">$ sudo apt-get update              # 更新源
$ sudo apt-get install xrdp        # 安装树莓派远程桌面
$
$ cd /tmp
$ wget https://project-downloads.drogon.net/wiringpi-latest.deb        # 下载最新版wiringpi
$ sudo dpkg -i wiringpi-latest.deb                                     # 安装wiringpi至最新版，即可使用gpio readall查看PIN说明
$
$ pip3 install paho-mqtt &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# 安装paho-mqtt模块
$ pip3 install demjson        # 安装demjson模块</code></pre>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box -->
        </section>
        <section class="col-md-5">
            <!-- TO DO List -->
            <div class="box box-widget">
                <div class="box-header with-border">
                    <i class="fa fa-code"></i>
                    <h3 class="box-title">树莓派上下载和运行的程序</h3>
                    <div class="box-tools pull-right">
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="row">
                        <div class="col-sm-12 codeContainer">
                            <pre><code class="bash">$ cd ~/Documents     # 进入Documents目录
$ curl --output raspberry_server.zip
       http://[you_ip]:[port]/[context]/static/files/raspberry_server.zip     # 下载raspberry_server.zip压缩文件
$ unzip raspberry_server.zip     # 将raspberry_server.zip解压缩到当前目录
$ rm raspberry_server.zip        # 删除压缩文件
$
$ cd raspberry_server            # 进入raspberry_server目录
$ node app.js                    # 运行服务程序</code></pre>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box -->
        </section>
    </div>
</div>
<footer class="main-footer m0">
    <div class="pull-right hidden-xs">当前版本： ${@Global.getConfig('productVersion')}</div>
    &copy; ${@DateUtils.getYear()} ${@Global.getConfig('productName')} - Powered By <a href="http://jeesite.com">JeeSite</a>
</footer>
<% } %>
<link rel="stylesheet" href="${ctxStatic}/libs/base/highlight-9.18.1/styles/vs.css">
<style type="text/css">
    div.codeContainer > pre {
        border: 0px;
    }
</style>
<link href="${ctxStatic}/js/video.js-7.7.5/video-js.min.css" rel="stylesheet">

<script src="${ctxStatic}/jquery/jquery-ui-sortable-1.12.1.min.js"></script>
<script src="${ctxStatic}/echarts/4.2/echarts.min.js"></script>
<script src="${ctxStatic}/libs/base/highlight-9.18.1/highlight.pack.js"></script>
<script src="${ctxStatic}/js/video.js-7.7.5/video.min.js"></script>
<script>
    $(function(){
        $(window).resize(function(){
            var footerHeight = $('.main-footer').outerHeight() || 0;
            var windowHeight = $(window).height();
            $('.content').css('min-height', windowHeight - footerHeight);
        }).resize();

        $('div.codeContainer > pre').each(function (idx, o) {
            hljs.highlightBlock(o);
        })
        // hljs.highlightBlock($('div.codeContainer').children().get(0));

        var player = videojs('my-player');
    });
</script>